<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="format-detection" content="telephone=no">
	<title>components</title>
	<link rel="stylesheet" data-toggle="html" href="../assets/agile/css/agile.layout.css">
	<link rel="stylesheet" data-toggle="html" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
	<style>
	.thumbnail a{
		border:1px solid #ddd;
		overflow:hidden;
		box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);
	}
	</style>
</head>
<body>
<div id="section_container">
	<section data-role="section" id="page_index" data-role="section" class="active">
		<header>
			<div class="titlebar">
				<a data-toggle="back" data-toggle="html" href="#"> <i class="icon icon-arrowleft"></i>
				</a>
				<h1>components</h1>
			</div>
		</header>
		<article id="index_article" data-role="article" class="active" style="top:44px;">
			<div class="sliver">基础组件</div>
			<ul class="grid thumbnail" data-rowspace="8">
				<li>
					<a data-toggle="html" href="bar.html">
						<img src="thumbnail/bar.png"/>
					</a>
					<label class="grid-label">Bar</label>
				</li>
				<li>
					<a data-toggle="html" href="tabbar.html">
						<img src="thumbnail/tabbar.png"/>
					</a>
					<label class="grid-label">动画Bar</label>
				</li>
				<li>
					<a data-toggle="html" href="progressbar.html">
						<img src="thumbnail/progressbar.png"/>
					</a>
					<label class="grid-label">进度条</label>
				</li>
				<li>
					<a data-toggle="html" href="bg.html">
						<img src="thumbnail/bg.png"/>
					</a>
					<label class="grid-label">背景</label>
				</li>
				<li>
					<a data-toggle="html" href="layout.html">
						<img src="thumbnail/layout.png"/>
					</a>
					<label class="grid-label">布局</label>
				</li>
				<li>
					<a data-toggle="html" href="button.html">
						<img src="thumbnail/button.png"/>
					</a>
					<label class="grid-label">按钮</label>
				</li>
				<li>
					<a data-toggle="html" href="iconfont.html">
						<img src="thumbnail/iconfont.png"/>
					</a>
					<label class="grid-label">文字图标</label>
				</li>
				<li>
					<a data-toggle="html" href="shape.html">
						<img src="thumbnail/shape.png"/>
					</a>
					<label class="grid-label">形状</label>
				</li>
				<li>
					<a data-toggle="html" href="code.html">
						<img src="thumbnail/code.png"/>
					</a>
					<label class="grid-label">代码展现</label>
				</li>
			</ul>

			<div class="sliver">表单</div>
			<ul class="grid thumbnail">
				<li>
					<a data-toggle="html" href="form.html">
						<img src="thumbnail/form.png"/>
					</a>
					<label class="grid-label">表单样式</label>
				</li>
				<li>
					<a data-toggle="html" href="form-serialize.html">
						<img src="thumbnail/form-serialize.png"/>
					</a>
					<label class="grid-label">表单序列化</label>
				</li>
				<li>
					<a data-toggle="html" href="form-validate.html">
						<img src="thumbnail/form-validate.png"/>
					</a>
					<label class="grid-label">表单验证</label>
				</li>
			</ul>

			<div class="sliver">栅格</div>
			<ul class="grid thumbnail">
				<li>
					<a data-toggle="html" href="table.html">
						<img src="thumbnail/table.png"/>
					</a>
					<label class="grid-label">表格</label>
				</li>
				<li>
					<a data-toggle="html" href="grid.html">
						<img src="thumbnail/grid.png"/>
					</a>
					<label class="grid-label">九宫格</label>
				</li>
				<li>
					<a data-toggle="html" href="list.html">
						<img src="thumbnail/list.png"/>
					</a>
					<label class="grid-label">列表</label>
				</li>
			</ul>

			<div class="sliver">错误页面</div>
			<ul class="grid thumbnail">
				<li>
					<a data-toggle="html" href="404.html">
						<img src="thumbnail/404.png"/>
					</a>
					<label class="grid-label">找不到页面</label>
				</li>
				<li>
					<a data-toggle="html" href="500.html">
						<img src="thumbnail/500.png"/>
					</a>
					<label class="grid-label">页面错误</label>
				</li>
				<li>
					<a data-toggle="html" href="nowifi.html">
						<img src="thumbnail/nowifi.png"/>
					</a>
					<label class="grid-label">无网络</label>
				</li>
			</ul>

			<div class="sliver">常用功能</div>
			<ul class="grid thumbnail">
				<li>
					<a data-toggle="html" href="calendar.html">
						<img src="thumbnail/calendar.png"/>
					</a>
					<label class="grid-label">日历</label>
				</li>
				<li>
					<a data-toggle="html" href="tree.html">
						<img src="thumbnail/tree.png"/>
					</a>
					<label class="grid-label">树结构</label>
				</li>
				<li>
					<a data-toggle="html" href="tree-selected.html">
						<img src="thumbnail/tree-selected.png"/>
					</a>
					<label class="grid-label">树结构-部门选择</label>
				</li>
				<li>
					<a data-toggle="html" href="weather.html">
						<img src="thumbnail/weather.png"/>
					</a>
					<label class="grid-label">天气</label>
				</li>
				<li>
					<a data-toggle="html" href="chat.html">
						<img src="thumbnail/chat.png"/>
					</a>
					<label class="grid-label">聊天</label>
				</li>
			</ul>
		
			<div id="exmobilocal" style="display: none;">
				<div class="sliver">exmobi本地能力</div>
				<ul class="grid thumbnail">
					<li>
						<a data-toggle="html" href="javascript:Exmobi.openWebview('res:page/www/components/exmobi-tel.html')">
							<img src="thumbnail/exmobi-tel.png"/>
						</a>
						<label class="grid-label">电话与通讯</label>
					</li>
					<li>
						<a data-toggle="html" href="javascript:Exmobi.openWebview('res:page/www/components/exmobi-camera.html')">
							<img src="thumbnail/exmobi-camera.png"/>
						</a>
						<label class="grid-label">照片选择</label>
					</li>
					<li>
						<a data-toggle="html" href="javascript:Exmobi.openWebview('res:page/www/components/exmobi-gps.html')">
							<img src="thumbnail/exmobi-gps.png"/>
						</a>
						<label class="grid-label">定位</label>
					</li>
					<li>
						<a data-toggle="html" href="javascript:Exmobi.openWebview('res:page/www/components/exmobi-qrcode.html')">
							<img src="thumbnail/exmobi-qrcode.png"/>
						</a>
						<label class="grid-label">扫码</label>
					</li>
					<li>
						<a data-toggle="html" href="javascript:Exmobi.openWebview('res:page/www/components/exmobi-third.html')">
							<img src="thumbnail/exmobi-third.png"/>
						</a>
						<label class="grid-label">调用第三方</label>
					</li>
					<li>
						<a data-toggle="html" href="javascript:Exmobi.openWebview('res:page/www/components/exmobi-webview.html')">
							<img src="thumbnail/exmobi-webview.png"/>
						</a>
						<label class="grid-label">webview控件</label>
					</li>
					<li>
						<a data-toggle="html" href="javascript:Exmobi.openWebview('res:page/www/components/exmobi-pattern.html')">
							<img src="thumbnail/exmobi-pattern.png"/>
						</a>
						<label class="grid-label">手势密码</label>
					</li>
					<li>
						<a data-toggle="html" href="javascript:Exmobi.openWebview('res:page/www/components/exmobi-cache.html')">
							<img src="thumbnail/exmobi-cache.png"/>
						</a>
						<label class="grid-label">缓存</label>
					</li>
				</ul>
			</div>

			<div id="weixinlocal" style="display: none;">
				<div class="sliver">微信本地能力</div>
				<ul class="grid thumbnail">
					<li>
						<a data-toggle="html" href="javascript:Exmobi.openWebview('res:page/www/components/weixin.html')">
							<img src="thumbnail/weixin.png"/>
						</a>
						<label class="grid-label">微信本地能力</label>
					</li>
				</ul>
			</div>

			<div class="sliver">html5本地能力</div>
			<ul class="grid thumbnail">
				<li>
					<a data-toggle="html" href="video.html">
						<img src="thumbnail/video.png"/>
					</a>
					<label class="grid-label">多媒体</label>
				</li>
				<li>
					<a data-toggle="html" href="local-photoselect.html">
						<img src="thumbnail/local-photoselect.png"/>
					</a>
					<label class="grid-label">照片选择</label>
				</li>
				<li>
					<a data-toggle="html" href="local-share.html">
						<img src="thumbnail/local-share.png"/>
					</a>
					<label class="grid-label">分享链接</label>
				</li>
				<li>
					<a data-toggle="html" href="local-map.html">
						<img src="thumbnail/local-map.png"/>
					</a>
					<label class="grid-label">签到地图</label>
				</li>
				<li>
					<a data-toggle="html" href="local-gps.html">
						<img src="thumbnail/local-gps.png"/>
					</a>
					<label class="grid-label">定位</label>
				</li>
				<li>
					<a data-toggle="html" href="local-db.html">
						<img src="thumbnail/local-db.png"/>
					</a>
					<label class="grid-label">本地数据库</label>
				</li>
			</ul>

		</article>
	</section>
	<!--- third -->
	<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
	<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
	<!---  agile -->
	<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
	<!-- app -->
	<script type="text/javascript" src="../assets/app/js/app.seedsui.js"></script>
</body>
</html>